﻿<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Create a Parralax Website using Stellar.js</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

    <!-- Le styles -->
    <link href="http://pallian.com/Silk/assets/css/bootstrap.css" rel="stylesheet">
    <link href="http://pallian.com/Silk/assets/css/bootstrap-responsive.css" rel="stylesheet">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js">
      </script>
    <![endif]-->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://pallian.com/Silk/assets/js/jquery.spritely-0.6.1.js"></script>
    <script src="http://pallian.com/Silk/assets/js/bootstrap.js"></script>
    <script src="http://pallian.com/Silk/assets/js/jquery.anystretch.min.js"></script>
    <script type="text/javascript">
        $.anystretch("images/clouds_bg.jpg", { speed: 250 });  
    </script>
    <script type="text/javascript">
        (function ($) {
            $(document).ready(function () {
                $('#clouds-fg').pan({ fps: 30, speed: 1, dir: 'left' });
                $('#clouds-bg').pan({ fps: 15, speed: 2, dir: 'left' });
            });
        })(jQuery);
	</script>

</head>

<body>
    <div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
        <div class="container">
            <div>
                <div class="animate">
                    <img src="http://pallian.com/Silk/images/silk_animate.gif" class="edgeLoad-EDGE-96740866" />
                    <img src="http://pallian.com/Silk/images/silkroute_logo.png" style="margin-top: 40px;"
                        class="edgeLoad-EDGE-96740866" />
                </div>
                <hr class="edgeLoad-EDGE-96740866" />
                <h1 class="edgeLoad-EDGE-96740866">
                    TRAVEL</h1>
                <h2 class="edgeLoad-EDGE-96740866">
                    REDEFINED</h2>
                <hr class="edgeLoad-EDGE-96740866" />
            </div>
            <h3 class="edgeLoad-EDGE-96740866">
                When it comes to planning your perfect trip, we get all the details just right</h3>
            <p class="tagline edgeLoad-EDGE-96740866">
                Prepare to be spoilt rotten</p>
            <div id="clouds-fg">
            </div>
            <div id="clouds-bg">
            </div>
        </div>

		<a class="button" data-slide="2" title=""></a>

	</div><!--End Slide 1-->

	<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5">
		<div class="wrapper">
		</div>

		<span class="slideno">Slide 2</span>
		<a class="button" data-slide="3" title=""></a>

	</div><!--End Slide 2-->


</body>
</html>
